Lay out multiple widgets vertically and horizontally

最常見的lay out模式就是將很多widget用水平或垂直排成一列，在flutter裡，row widget可以水平排成一列，而column widget可以垂直排成一列

關於row和column的6個重要觀念

• row 和 column是最常用到的排版模式
• row 和 column各有一個child widgets的list
• 其中child widget自己可以是row、column或其他的widget
• 可以指定 row 或 column 如何垂直或水平對齊child widget
• 可以伸長或限制特定的child widget
• 可以指定子child widget如何使用row或column的可用空間

簡單來說，你在row或column裡放入的widget也可以是row或column widget等等，這使得flutter的排版簡單但又富有變化性

以上圖來說，row widget裡面就包含一個column widget和一個image widget，然後column widget裡又有兩個text widget和兩個row widget(如下圖)

從上面兩張圖可以看出flutter與java和kotlin的排版概念非常不同，只運用row及column兩種widget的組合就可以創建出app的介面

Aligning widgets

但在row或是column中都會想要分配裡面child widget的空間以讓畫面更符合使用者的需求，因此不管是row還是column都有兩個重要的屬性，分別為mainAxisAlignment和crossAxisAlignment

row因為是水平的所以row的mainAxisAlignment是x軸方向而crossAxisAlignment是y軸方向。然而column是垂直的，所以column的mainAxisAlignment是y軸方向，crossAxisAlignment是x軸方向

row並且使用MainAxisAlignment.spaceEvenly讓水平空間平均分配

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

output

column並且使用MainAxisAlignment.spaceEvenly讓垂直空間平均分配

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

output

以上的例子都是平均分配，如果要置左或置右也有start或end，甚至可以用sized box加入到row裡面客製化自己要的距離。

參考資料:
https://docs.flutter.dev/development/ui/layout